<template>
  <div class="Edition">
    <!-- 版本发布单 -->
    <el-carousel trigger="click" :autoplay="false">
      <el-carousel-item>
        <div class="mainBox">
          <div class="leftcontent">
            <div class="search_box">
              <el-date-picker
                @change="changeOne"
                v-model="week"
                type="week"
                placeholder="选择周"
                format="YYYY第ww周"
              >
              </el-date-picker>
            </div>
            <div class="percentage">
              <div class="ring">
                <el-progress
                  type="circle"
                  :percentage="Number(VmbizCount?.successRate ? VmbizCount?.successRate : 0)"
                  :width="69"
                  color="#27d7b0"
                  :stroke-width="8"
                  stroke-linecap="line"
                >
                  <template #default="{ percentage }">
                    <span class="percentage-value">{{ percentage }}%</span>
                  </template>
                </el-progress>
                <p>升级成功率</p>
              </div>
              <div class="ring">
                <el-progress
                  type="circle"
                  :percentage="Number(VmbizCount?.automateRate ? VmbizCount?.automateRate : 0)"
                  :width="69"
                  color="#007af5"
                  :stroke-width="8"
                  stroke-linecap="line"
                >
                  <template #default="{ percentage }">
                    <span class="percentage-value">{{ percentage }}%</span>
                  </template>
                </el-progress>
                <p>自动化率</p>
              </div>
              <div class="ring">
                <el-progress
                  type="circle"
                  :percentage="Number(VmbizCount?.abnormalRate ? VmbizCount?.abnormalRate : 0)"
                  :width="69"
                  color="#fc6f5e"
                  :stroke-width="8"
                  stroke-linecap="line"
                >
                  <template #default="{ percentage }">
                    <span class="percentage-value">{{ percentage }}%</span>
                  </template>
                </el-progress>
                <p>异常处置占比</p>
              </div>
              <div class="ring">
                <el-progress
                  type="circle"
                  :percentage="Number(VmbizCount?.urgencyRate ? VmbizCount?.urgencyRate : 0)"
                  :width="69"
                  color="#ffbb37"
                  :stroke-width="8"
                  stroke-linecap="line"
                >
                  <template #default="{ percentage }">
                    <span class="percentage-value">{{ percentage }}%</span>
                  </template>
                </el-progress>
                <p>紧急升级占比</p>
              </div>
            </div>
            <div class="exception">
              <div class="exceptionLeft">
                <div class="exception_item" @click="goEdition('1')">
                  <p>
                    <span>审批中</span>
                    <span style="color: #0079f5">{{
                      VmbizCount?.underApprovalCount ? VmbizCount?.underApprovalCount : 0
                    }}</span>
                  </p>
                  <el-progress
                    :stroke-width="8"
                    :percentage="
                      Number(VmbizCount?.underApprovalRate ? VmbizCount?.underApprovalRate : 0)
                    "
                    color="#0079f5"
                  />
                </div>
                <div class="exception_item" @click="goEdition('2')">
                  <p>
                    <span>已发布</span>
                    <span style="color: #27d7af">{{
                      VmbizCount?.approvalCount ? VmbizCount?.approvalCount : 0
                    }}</span>
                  </p>
                  <el-progress
                    :stroke-width="8"
                    :percentage="Number(VmbizCount?.approvalRate ? VmbizCount?.approvalRate : 0)"
                    color="#27d7af"
                  />
                </div>
                <div class="exception_item" @click="goEdition('3')">
                  <p>
                    <span>实施中</span>
                    <span style="color: #a95fff">{{
                      VmbizCount?.implementCount ? VmbizCount?.implementCount : 0
                    }}</span>
                  </p>
                  <el-progress
                    :stroke-width="8"
                    :percentage="Number(VmbizCount?.implementRate ? VmbizCount?.implementRate : 0)"
                    color="#A95FFF"
                  />
                </div>
                <div class="exception_item" @click="goEdition('4')">
                  <p>
                    <span>正常完成</span>
                    <span style="color: #89c997">{{
                      VmbizCount?.zcimplementCount ? VmbizCount?.zcimplementCount : 0
                    }}</span>
                  </p>
                  <el-progress
                    :stroke-width="8"
                    :percentage="
                      Number(VmbizCount?.zcimplementRate ? VmbizCount?.zcimplementRate : 0)
                    "
                    color="#89C997"
                  />
                </div>
                <div class="exception_item" @click="goEdition('5')">
                  <p>
                    <span>升级异常</span>
                    <span style="color: #ffbb37">{{
                      VmbizCount?.ycimplementCount ? VmbizCount?.ycimplementCount : 0
                    }}</span>
                  </p>
                  <el-progress
                    :stroke-width="8"
                    :percentage="
                      Number(VmbizCount?.ycimplementRate ? VmbizCount?.ycimplementRate : 0)
                    "
                    color="#FFBB37"
                  />
                </div>
              </div>
              <div class="exceptionRight" @click="goEdition('6')">
                <div class="exception_item">
                  <p>
                    <span>已下载</span>
                    <span style="color: #0079f5">{{
                      VmbizCount?.donwoldCount ? VmbizCount?.donwoldCount : 0
                    }}</span>
                  </p>
                  <el-progress
                    :stroke-width="8"
                    :percentage="Number(VmbizCount?.donwoldRate ? VmbizCount?.donwoldRate : 0)"
                    color="#0079f5"
                  />
                </div>
                <div class="exception_item" @click="goEdition('7')">
                  <p>
                    <span>操作已完成</span>
                    <span style="color: #933503">{{
                      VmbizCount?.czwcCount ? VmbizCount?.czwcCount : 0
                    }}</span>
                  </p>
                  <el-progress
                    :stroke-width="8"
                    :percentage="Number(VmbizCount?.czwcRate ? VmbizCount?.czwcRate : 0)"
                    color="#933503"
                  />
                </div>
                <div class="exception_item" @click="goEdition('8')">
                  <p>
                    <span>健康检查已完成</span>
                    <span style="color: #a95fff">{{
                      VmbizCount?.jkjcCount ? VmbizCount?.jkjcCount : 0
                    }}</span>
                  </p>
                  <el-progress
                    :stroke-width="8"
                    :percentage="Number(VmbizCount?.jkjcRate ? VmbizCount?.jkjcRate : 0)"
                    color="#A95FFF"
                  />
                </div>
                <div class="exception_item" @click="goEdition('9')">
                  <p>
                    <span>业务验证已完成</span>
                    <span style="color: #fb6f5d">{{
                      VmbizCount?.ywyzCount ? VmbizCount?.ywyzCount : 0
                    }}</span>
                  </p>
                  <el-progress
                    :stroke-width="8"
                    :percentage="Number(VmbizCount?.ywyzRate ? VmbizCount?.ywyzRate : 0)"
                    color="#FB6F5D"
                  />
                </div>
                <div class="exception_item"> </div>
              </div>
            </div>
            <!-- <div id="mychart" v-if="false"></div> -->
          </div>
          <div class="rightcontent">
            <p class="current_time">当前时间统计</p>
            <div class="Type_presentation">
              <div class="typeCount">
                <div class="module">
                  <div class="situation" @click="goEdition('16')" style="cursor: pointer">
                    <span class="typeNum" style="color: #0079f5">{{
                      VmbizCount?.monthCount ? VmbizCount?.monthCount : 0
                    }}</span>
                    <span class="type" style="color: #0079f5">当月已发布</span>
                  </div>
                  <div class="situation" @click="goEdition('17')" style="cursor: pointer">
                    <span class="typeNum" style="color: #5d676d">{{
                      VmbizCount?.yearCount ? VmbizCount?.yearCount : 0
                    }}</span>
                    <span class="type" style="color: #5d676d">全年已发布</span>
                  </div>
                </div>
                <div class="module">
                  <div
                    class="situation"
                    style="background: rgba(39, 215, 175, 0.1); cursor: pointer"
                    @click="goEdition('14')"
                  >
                    <span class="typeNum" style="color: #27d7af">{{
                      VmbizCount?.cswxzCount ? VmbizCount?.cswxzCount : '0'
                    }}</span>
                    <span class="type" style="color: #27d7af">超时未下载</span>
                  </div>
                  <div
                    class="situation"
                    style="background: rgba(251, 111, 93, 0.1); cursor: pointer"
                    @click="goEdition('15')"
                  >
                    <span class="typeNum" style="color: #fb6f5d">{{
                      VmbizCount?.jkjcwwcCount ? VmbizCount?.jkjcwwcCount : '0'
                    }}</span>
                    <span class="type" style="color: #fb6f5d">健康检查未完成</span>
                  </div>
                </div>
                <div class="module" style="background: rgba(93, 103, 109, 0.1); cursor: pointer">
                  <div class="situation" @click="goEdition('12')">
                    <span class="typeNum" style="color: #5d676d">{{
                      VmbizCount?.czcsCount ? VmbizCount?.czcsCount : '0'
                    }}</span>
                    <span class="type" style="color: #5d676d"> 超过计划完成时间技术操作未完成</span>
                  </div>
                  <div class="situation" @click="goEdition('13')">
                    <span class="typeNum" style="color: #5d676d">{{
                      VmbizCount?.forCount ? VmbizCount?.forCount : '0'
                    }}</span>
                    <span class="type" style="color: #5d676d">超过4:00技术操作未完成</span>
                  </div>
                </div>
                <div class="module" style="background: rgba(193, 118, 61, 0.1); cursor: pointer">
                  <div class="situation" @click="goEdition('10')">
                    <span class="typeNum" style="color: #c1763d">{{
                      VmbizCount?.ywyzwwcCount ? VmbizCount?.ywyzwwcCount : '0'
                    }}</span>
                    <span class="type" style="color: #c1763d">业务验证未完成</span>
                  </div>
                  <div class="situation" @click="goEdition('11')">
                    <span class="typeNum" style="color: #c1763d">{{
                      VmbizCount?.fiveCount ? VmbizCount?.fiveCount : '0'
                    }}</span>
                    <span class="type" style="color: #c1763d">超过5:00业务验证未完成</span>
                  </div>
                </div>
              </div>
              <div class="Cumulative">
                <div class="situation" style="background: rgba(141, 34, 254, 0.1); cursor: pointer">
                  <span class="typeNum" style="color: #a048ff">
                    {{ VmbizCount?.qnsuccessRate ? VmbizCount?.qnsuccessRate : 0 }}%</span
                  >
                  <span class="type" style="color: #a048ff">全年升级成功率</span>
                </div>
                <div
                  class="situation"
                  style="background: rgba(224, 27, 150, 0.1); cursor: pointer"
                  @click="goAnnual('9')"
                >
                  <span class="typeNum" style="color: #e93ca7">{{
                    VmbizCount?.qnjsczCount ? VmbizCount?.qnjsczCount : 0
                  }}</span>
                  <span class="type" style="color: #e93ca7">技术操作未完成（累计）</span>
                </div>
                <div
                  class="situation"
                  style="background: rgba(96, 114, 150, 0.1); cursor: pointer"
                  @click="goAnnual('10')"
                >
                  <span class="typeNum" style="color: #7286a7">{{
                    VmbizCount?.qnjkjcwwcCount ? VmbizCount?.qnjkjcwwcCount : 0
                  }}</span>
                  <span class="type" style="color: #7286a7">健康检查未完成（累计）</span>
                </div>
                <div
                  class="situation"
                  style="background: rgba(44, 117, 87, 0.1); cursor: pointer"
                  @click="goAnnual('11')"
                >
                  <span class="typeNum" style="color: #35866a">{{
                    VmbizCount?.qnywyzwwcCount ? VmbizCount?.qnywyzwwcCount : 0
                  }}</span>
                  <span class="type" style="color: #35866a">业务验证未完成（累计）</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="Provincial_centre">
          <div class="search_box">
            <el-date-picker
              @change="Provincial_changeOne"
              v-model="Provincial_week"
              type="week"
              placeholder="选择周"
              format="YYYY第ww周"
            >
            </el-date-picker>
          </div>
          <div class="Exception_item">
            <div class="week">
              <p class="current_time">本周</p>
              <div class="typeCount">
                <div class="module">
                  <div
                    class="situation"
                    style="background: rgba(39, 215, 175, 0.1); cursor: pointer"
                    @click="goProvincial('1')"
                  >
                    <span class="typeNum" style="color: #27d7af">{{
                      ProvinceCount?.publishedCount ? ProvinceCount?.publishedCount : '0'
                    }}</span>
                    <span class="type" style="color: #27d7af">已发布</span>
                  </div>
                  <div class="situation" style="background: rgba(251, 111, 93, 0.1)">
                    <span class="typeNum" style="color: #fb6f5d">
                      {{
                        ProvinceCount?.accomplishCount ? ProvinceCount?.accomplishCount : '0'
                      }}%</span
                    >
                    <span class="type" style="color: #fb6f5d">完成率</span>
                  </div>
                </div>
                <div class="module">
                  <div
                    class="situation"
                    style="background: rgba(93, 103, 109, 0.1); cursor: pointer"
                    @click="goProvincial('2')"
                  >
                    <span class="typeNum" style="color: #5d676d">{{
                      ProvinceCount?.downlodCount ? ProvinceCount?.downlodCount : '0'
                    }}</span>
                    <span class="type" style="color: #5d676d"> 已下载</span>
                  </div>
                  <div
                    class="situation"
                    @click="goProvincial('3')"
                    style="background: rgba(0, 122, 245, 0.1)"
                  >
                    <span class="typeNum" style="color: #0079f5">{{
                      ProvinceCount?.noDownlodCount ? ProvinceCount?.noDownlodCount : 0
                    }}</span>
                    <span class="type" style="color: #0079f5">未下载</span>
                  </div>
                </div>
                <div class="module">
                  <div
                    class="situation"
                    @click="goProvincial('4')"
                    style="background: rgba(193, 118, 61, 0.1); cursor: pointer"
                  >
                    <span class="typeNum" style="color: #c1763d">{{
                      ProvinceCount?.completedCount ? ProvinceCount?.completedCount : '0'
                    }}</span>
                    <span class="type" style="color: #c1763d">已完成</span>
                  </div>
                  <div
                    class="situation"
                    style="background: rgba(141, 34, 254, 0.1); cursor: pointer"
                    @click="goProvincial('5')"
                  >
                    <span class="typeNum" style="color: #a048ff">
                      {{
                        ProvinceCount?.unfinishedCount ? ProvinceCount?.unfinishedCount : 0
                      }}</span
                    >
                    <span class="type" style="color: #a048ff">未完成</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="Current_year">
              <p class="current_time">全年</p>
              <div class="typeCount">
                <div class="module">
                  <div
                    class="situation"
                    style="background: rgba(39, 215, 175, 0.1); cursor: pointer"
                    @click="goProvincial('6')"
                  >
                    <span class="typeNum" style="color: #27d7af">{{
                      ProvinceCount?.publishedYearCount ? ProvinceCount?.publishedYearCount : '0'
                    }}</span>
                    <span class="type" style="color: #27d7af">全年已发布</span>
                  </div>
                  <div class="situation" style="background: rgba(251, 111, 93, 0.1)">
                    <span class="typeNum" style="color: #fb6f5d">
                      {{
                        ProvinceCount?.accomplishYearCount
                          ? ProvinceCount?.accomplishYearCount
                          : '0'
                      }}%</span
                    >
                    <span class="type" style="color: #fb6f5d">完成率</span>
                  </div>
                </div>
                <div class="module">
                  <div
                    class="situation"
                    style="background: rgba(93, 103, 109, 0.1); cursor: pointer"
                    @click="goProvincial('7')"
                  >
                    <span class="typeNum" style="color: #5d676d">{{
                      ProvinceCount?.downlodYearCount ? ProvinceCount?.downlodYearCount : '0'
                    }}</span>
                    <span class="type" style="color: #5d676d"> 已下载</span>
                  </div>
                  <div
                    class="situation"
                    @click="goProvincial('8')"
                    style="background: rgba(0, 122, 245, 0.1)"
                  >
                    <span class="typeNum" style="color: #0079f5">{{
                      ProvinceCount?.noDownlodYearCount ? ProvinceCount?.noDownlodYearCount : 0
                    }}</span>
                    <span class="type" style="color: #0079f5">未下载</span>
                  </div>
                </div>
                <div class="module">
                  <div
                    class="situation"
                    @click="goProvincial('9')"
                    style="background: rgba(193, 118, 61, 0.1); cursor: pointer"
                  >
                    <span class="typeNum" style="color: #c1763d">{{
                      ProvinceCount?.completedYearCount ? ProvinceCount?.completedYearCount : '0'
                    }}</span>
                    <span class="type" style="color: #c1763d">已完成</span>
                  </div>
                  <div
                    class="situation"
                    @click="goProvincial('10')"
                    style="background: rgba(141, 34, 254, 0.1); cursor: pointer"
                  >
                    <span class="typeNum" style="color: #a048ff">
                      {{
                        ProvinceCount?.unfinishedYearCount ? ProvinceCount?.unfinishedYearCount : 0
                      }}</span
                    >
                    <span class="type" style="color: #a048ff">未完成</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { watch, ref, onMounted } from 'vue'; // reactive,
  import { useRouter } from 'vue-router';
  import moment from 'moment';
  import { selectVmBizInfoCount, selectTaskInfoProvinceCount } from '@/http/api';
  import { useStore } from 'vuex';
  const store = useStore();
  const router = useRouter();
  const props = defineProps({
    //是否为预览模式
    changeTime: {
      type: Number,
      default: 0
    }
  });
  const startTime = ref('');
  const endTime = ref('');
  const Provincial_startTime = ref('');
  const Provincial_endTime = ref('');

  const startTimeStamp = ref('');
  const endTimeStamp = ref('');
  const week = ref('');
  const Provincial_week = ref('');
  const VmbizCount = ref();
  const ProvinceCount = ref();
  // const published = ref('');
  onMounted(() => {
    getCurrWeekDays();
    getProvinceCount(Provincial_startTime.value, Provincial_endTime.value);
    getVmbizCount(startTime.value, endTime.value);
    // barBox();
  });
  const getCurrWeekDays = () => {
    let date = [];
    let weekOfday = parseInt(moment().format('d')); // 计算今天是这周第几天 周日为一周中的第一天
    let start = moment().subtract(weekOfday, 'days').format('YYYYMMDD'); // 周一日期
    let end = moment()
      .add(7 - weekOfday - 1, 'days')
      .format('YYYYMMDD'); // 周日日期
    date.push(start);
    date.push(end);

    startTime.value = start;
    Provincial_startTime.value = start;
    endTime.value = end;
    Provincial_endTime.value = end;
    return date;
  };
  // const ChangeDecimalToPercentage = (data) => {
  //   let data2 = parseFloat(data).toFixed(2);
  //   let data1 = parseFloat(data).toFixed(2) + '%';
  //   if (data2 == '0.00' || data1 == 'NaN%') {
  //     text.value = true;
  //     return '暂无数据';
  //   } else {
  //     let data1 = parseFloat(data).toFixed(2) + '%';
  //     if (data1 == 'NaN%') {
  //       text.value = true;

  //       return data;
  //     } else {
  //       text.value = false;

  //       return data1;
  //     }
  //   }
  // };
  // const ChangeDecimalToPercentage1 = (data) => {
  //   let data2 = parseFloat(data).toFixed(2);
  //   let data1 = parseFloat(data).toFixed(2) + '%';
  //   if (data2 == '0.00' || data1 == 'NaN%') {
  //     value1.value = true;
  //     return '暂无数据';
  //   } else {
  //     let data1 = parseFloat(data).toFixed(2) + '%';
  //     if (data1 == 'NaN%') {
  //       value1.value = true;
  //       return data;
  //     } else {
  //       value1.value = false;

  //       return data1;
  //     }
  //   }
  // };
  const changeOne = (val) => {
    let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
    // startTimeStamp.value = Timetransform(timeStamp - 24 * 60 * 60 * 1000); //开始时间
    startTimeStamp.value = Timetransform(timeStamp); //开始时间
    // endTimeStamp.value = Timetransform(timeStamp + 24 * 60 * 60 * 1000 * 5); //结束时间
    endTimeStamp.value = Timetransform(timeStamp + 24 * 60 * 60 * 1000 * 6); //结束时间
    endTime.value = endTimeStamp.value;
    startTime.value = startTimeStamp.value;
    getVmbizCount(startTime.value, endTime.value);
  };
  const Provincial_changeOne = (val) => {
    let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
    // startTimeStamp.value = Timetransform(timeStamp - 24 * 60 * 60 * 1000); //开始时间
    startTimeStamp.value = Timetransform(timeStamp); //开始时间
    // endTimeStamp.value = Timetransform(timeStamp + 24 * 60 * 60 * 1000 * 5); //结束时间
    endTimeStamp.value = Timetransform(timeStamp + 24 * 60 * 60 * 1000 * 6); //结束时间
    Provincial_endTime.value = endTimeStamp.value;
    Provincial_startTime.value = startTimeStamp.value;
    getProvinceCount(Provincial_startTime.value, Provincial_endTime.value);
  };
  const Timetransform = (unixtimest: Number) => {
    let unixtimestamp = new Date(unixtimest);
    let year = 1900 + unixtimestamp.getYear();
    let month = '0' + (unixtimestamp.getMonth() + 1);
    let date = '0' + unixtimestamp.getDate();
    // let hour = "0" + unixtimestamp.getHours();
    // let minute = "0" + unixtimestamp.getMinutes();
    // let second = "0" + unixtimestamp.getSeconds();
    return (
      year +
      month.substring(month.length - 2, month.length) +
      date.substring(date.length - 2, date.length)
    );
  };
  const getVmbizCount = (startTime: string, endTime: striing) => {
    selectVmBizInfoCount({
      startTime: startTime,
      endTime: endTime
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      VmbizCount.value = res.data.data;
    });
  };
  const getProvinceCount = (startTime: string, endTime: striing) => {
    selectTaskInfoProvinceCount({
      startTime: startTime,
      endTime: endTime
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      ProvinceCount.value = res.data.data;
    });
  };
  const goEdition = (num_index) => {
    // type_count
    store.commit('setTime', { startTime: startTime.value, endTime: endTime.value });
    router.push({
      name: 'edition',
      params: {
        // type: type_count,
        Index: num_index,
        startTime: startTime.value,
        endTime: endTime.value
      }
    });
  };
  const goProvincial = (num_index) => {
    // type_count
    store.commit('setProvincial_Time', {
      startTime: Provincial_startTime.value,
      endTime: Provincial_endTime.value
    });
    router.push({
      name: 'Provincial_centre',
      params: {
        // type: type_count,
        Index: num_index,
        startTime: Provincial_startTime.value,
        endTime: Provincial_endTime.value
      }
    });
  };
  const goAnnual = (num_index) => {
    // type_count
    store.commit('setTime', { startTime: startTime.value, endTime: endTime.value });
    router.push({
      name: 'Annual_edition',
      params: {
        // type: type_count,
        Index: num_index,
        startTime: startTime.value,
        endTime: endTime.value
      }
    });
  };
  watch(
    () => props.changeTime,
    () => {
      getCurrWeekDays();
      getVmbizCount(startTime.value, endTime.value);
    }
  );
</script>

<style scoped lang="less">
  .Edition {
    width: 100%;
    .el-carousel--horizontal {
      height: 100%;
      :deep(.el-carousel__container) {
        height: 100%;
        .mainBox {
          //  width: 60%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          .leftcontent {
            width: 53%;
            height: 100%;
            .search_box {
              width: 100%;
              height: 37px;
              line-height: 37px;
              font-size: 16px;
              color: #fff;
              display: flex;
              margin-bottom: 5px;
              box-sizing: border-box;
              :deep(.el-date-editor) {
                width: 100%;
                :deep(.el-input__wrapper) {
                  width: 100%;
                  // margin: auto 0;
                }
              }
            }
            .percentage {
              width: 100%;
              height: 33%;
              display: flex;
              justify-content: space-between;
              .ring {
                width: 23%;
                display: flex;
                flex-direction: column;
                align-items: center;
                .percentage-value {
                  font-size: 16px;
                  font-weight: bold;
                  color: #46535d;
                }
                p {
                  // width: 69px;
                  width: 100%;
                  margin: 0;
                  padding: 0;
                  line-height: 25px;
                  text-align: center;
                  font-size: 13px;
                  color: #46535d;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
            .exception {
              height: calc(67% - 42px);
              display: flex;
              justify-content: space-between;
              .exceptionLeft,
              .exceptionRight {
                width: 48%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .exception_item {
                  height: 19.5%;
                  width: 100%;
                  // background: plum;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  cursor: pointer;
                  p {
                    padding: 0;
                    margin: 0;
                    display: flex;
                    justify-content: space-between;
                    span {
                      font-size: 14px;
                      color: #46535d;
                    }
                  }
                  .el-progress__text {
                    display: none;
                  }
                }
              }
            }
          }
          .rightcontent {
            width: 45%;
            .current_time {
              margin: 0;
              padding: 0;
              line-height: 37px;
              font-size: 16px;
              font-weight: bold;
              color: #46545d;
              margin-bottom: 5px;
              box-sizing: border-box;
            }
            .Type_presentation {
              height: calc(100% - 42px);
              display: flex;
              justify-content: space-between;
              .typeCount {
                height: 100%;
                width: 65%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .module {
                  height: 24%;
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  border-radius: 8px;
                  .situation {
                    height: 100%;
                    width: 49%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    border-radius: 8px;
                    cursor: pointer;
                    .typeNum {
                      text-align: center;
                      font-size: 16px;
                      font-weight: 600;
                    }
                    .type {
                      font-size: 12px;
                      width: 90%;
                      text-align: center;
                      // text-overflow: -o-ellipsis-lastline;
                      // overflow: hidden;
                      // text-overflow: ellipsis;
                      // display: -webkit-box;
                      // -webkit-line-clamp: 2;
                      // -webkit-box-orient: vertical;
                      // word-break: break-all;
                    }
                  }
                }
              }
              .Cumulative {
                width: 33%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .situation {
                  height: 24%;
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  border-radius: 8px;
                  cursor: pointer;
                  .typeNum {
                    text-align: center;
                    font-size: 18px;
                    font-weight: 600;
                  }
                  .type {
                    font-size: 12px;
                    font-weight: 400;
                    width: 80%;
                    text-align: center;
                    &.title_long {
                      width: 80%;
                      // margin: 0 auto;
                      // text-overflow: -o-ellipsis-lastline;
                      // overflow: hidden;
                      // text-overflow: ellipsis;
                      // display: -webkit-box;
                      // -webkit-line-clamp: 2;
                      // -webkit-box-orient: vertical;
                      // word-break: break-all;
                    }
                  }
                }
              }
            }
          }
        }
        .Provincial_centre {
          height: 100%;
          .search_box {
            width: 100%;
            height: 37px;
            line-height: 37px;
            font-size: 16px;
            color: #fff;
            display: flex;
            margin-bottom: 5px;
            box-sizing: border-box;
            :deep(.el-date-editor) {
              width: 100%;
              :deep(.el-input__wrapper) {
                width: 100%;
                // margin: auto 0;
              }
            }
          }
          .Exception_item {
            height: calc(100% - 42px);
            width: 100%;
            display: flex;
            justify-content: space-between;
            .week,
            .Current_year {
              height: 100%;
              width: 48%;
              .current_time {
                margin: 0;
                padding: 0;
                line-height: 37px;
                font-size: 16px;
                font-weight: bold;
                color: #46545d;
                margin-bottom: 5px;
                box-sizing: border-box;
              }
              .typeCount {
                height: calc(100% - 37px);
                // width: 65%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .module {
                  height: 32%;
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  border-radius: 8px;
                  .situation {
                    height: 100%;
                    width: 49%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    border-radius: 8px;
                    cursor: pointer;
                    .typeNum {
                      text-align: center;
                      font-size: 18px;
                      font-weight: 600;
                    }
                    .type {
                      font-size: 12px;
                      font-weight: 400;
                      width: 80%;
                      text-align: center;
                      &.title_long {
                        width: 80%;
                        // margin: 0 auto;
                        // text-overflow: -o-ellipsis-lastline;
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                        // display: -webkit-box;
                        // -webkit-line-clamp: 2;
                        // -webkit-box-orient: vertical;
                        // word-break: break-all;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      :deep(.el-carousel__indicators) {
        // bottom: -10px;
        .el-carousel__button {
          background: #0079f5;
        }
      }
    }
  }
</style>
